<template>
  <nav-bar title="修改昵称" left-text="" left-arrow @click-left="onClickLeft" />
  <input
    type="text"
    placeholder="请输入昵称"
    maxlength="8"
    v-model="username"
  />
  <button @click="onClickLeft">完成</button>
</template>
<script setup>
import { useRouter } from "vue-router";
import { getUserAPI, upUserDataAPI } from "../API/li";
import { NavBar } from "vant";
import { ref } from "vue";

const nickname = ref("");
const username = ref("");
const email = ref("");
const xueke = ref("");
const diqu = ref("");
const nianji = ref("");
const school = ref("");
const ID = ref("");
const sex = ref("");
const fileTag = ref("");
const Imgurl = ref("");

// upUserDataAPI().then((res) => {
//   console.log(res);
// });

//获取用户信息
getUserAPI().then((res) => {
  ID.value = res.data.id;
  console.log(res.data);
  nickname.value = res.data.nickname;
  username.value = res.data.username;
  email.value = res.data.eMail;
  sex.value = res.data.sex;
  school.value = res.data.school;
  diqu.value = res.data.region;
  xueke.value = res.data.subject;
  nianji.value = res.data.grade;
});

const onClickLeft = () => {
  upUserDataAPI(
    ID.value,
    sex.value,
    email.value,
    username.value,
    nickname.value,
    xueke.value,
    diqu.value,
    school.value,
    nianji.value
  ).then((res) => {
    console.log(res);
    router.go(-1);
  });
};
const router = useRouter();
</script>
<style scoped>
body {
  background-color: rgb(240, 243, 248);
}
input {
  box-sizing: border-box;
  width: 100%;
  height: 1.25rem;
  outline: none;
  border: none;
  border-top: 0.3125rem solid rgb(240, 243, 248);
  background-color: white;
  font-size: 0.8rem;
  height: 2.75rem;
  padding-left: 0.3125rem;
}
button {
  box-sizing: border-box;
  margin: 0.9375rem 1.125rem;
  width: 90%;
  height: 1.5rem;
  border: none;
  background-color: var(--main-color);
  border-radius: 0.9125rem;
  color: white;
  font-size: 0.6rem;
  box-shadow: 0px 1px 3px rgb(212, 212, 212);
}
</style>
